<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples: Percentiles</title>
    <link href="../examples.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]>
    <script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../../jquery.flot.fillbetween.js"></script>
    <script type="text/javascript">

        $(function () {

            var males = {"15%": [
                [2, 88.0],
                [3, 93.3],
                [4, 102.0],
                [5, 108.5],
                [6, 115.7],
                [7, 115.6],
                [8, 124.6],
                [9, 130.3],
                [10, 134.3],
                [11, 141.4],
                [12, 146.5],
                [13, 151.7],
                [14, 159.9],
                [15, 165.4],
                [16, 167.8],
                [17, 168.7],
                [18, 169.5],
                [19, 168.0]
            ], "90%": [
                [2, 96.8],
                [3, 105.2],
                [4, 113.9],
                [5, 120.8],
                [6, 127.0],
                [7, 133.1],
                [8, 139.1],
                [9, 143.9],
                [10, 151.3],
                [11, 161.1],
                [12, 164.8],
                [13, 173.5],
                [14, 179.0],
                [15, 182.0],
                [16, 186.9],
                [17, 185.2],
                [18, 186.3],
                [19, 186.6]
            ], "25%": [
                [2, 89.2],
                [3, 94.9],
                [4, 104.4],
                [5, 111.4],
                [6, 117.5],
                [7, 120.2],
                [8, 127.1],
                [9, 132.9],
                [10, 136.8],
                [11, 144.4],
                [12, 149.5],
                [13, 154.1],
                [14, 163.1],
                [15, 169.2],
                [16, 170.4],
                [17, 171.2],
                [18, 172.4],
                [19, 170.8]
            ], "10%": [
                [2, 86.9],
                [3, 92.6],
                [4, 99.9],
                [5, 107.0],
                [6, 114.0],
                [7, 113.5],
                [8, 123.6],
                [9, 129.2],
                [10, 133.0],
                [11, 140.6],
                [12, 145.2],
                [13, 149.7],
                [14, 158.4],
                [15, 163.5],
                [16, 166.9],
                [17, 167.5],
                [18, 167.1],
                [19, 165.3]
            ], "mean": [
                [2, 91.9],
                [3, 98.5],
                [4, 107.1],
                [5, 114.4],
                [6, 120.6],
                [7, 124.7],
                [8, 131.1],
                [9, 136.8],
                [10, 142.3],
                [11, 150.0],
                [12, 154.7],
                [13, 161.9],
                [14, 168.7],
                [15, 173.6],
                [16, 175.9],
                [17, 176.6],
                [18, 176.8],
                [19, 176.7]
            ], "75%": [
                [2, 94.5],
                [3, 102.1],
                [4, 110.8],
                [5, 117.9],
                [6, 124.0],
                [7, 129.3],
                [8, 134.6],
                [9, 141.4],
                [10, 147.0],
                [11, 156.1],
                [12, 160.3],
                [13, 168.3],
                [14, 174.7],
                [15, 178.0],
                [16, 180.2],
                [17, 181.7],
                [18, 181.3],
                [19, 182.5]
            ], "85%": [
                [2, 96.2],
                [3, 103.8],
                [4, 111.8],
                [5, 119.6],
                [6, 125.6],
                [7, 131.5],
                [8, 138.0],
                [9, 143.3],
                [10, 149.3],
                [11, 159.8],
                [12, 162.5],
                [13, 171.3],
                [14, 177.5],
                [15, 180.2],
                [16, 183.8],
                [17, 183.4],
                [18, 183.5],
                [19, 185.5]
            ], "50%": [
                [2, 91.9],
                [3, 98.2],
                [4, 106.8],
                [5, 114.6],
                [6, 120.8],
                [7, 125.2],
                [8, 130.3],
                [9, 137.1],
                [10, 141.5],
                [11, 149.4],
                [12, 153.9],
                [13, 162.2],
                [14, 169.0],
                [15, 174.8],
                [16, 176.0],
                [17, 176.8],
                [18, 176.4],
                [19, 177.4]
            ]};

            var females = {"15%": [
                [2, 84.8],
                [3, 93.7],
                [4, 100.6],
                [5, 105.8],
                [6, 113.3],
                [7, 119.3],
                [8, 124.3],
                [9, 131.4],
                [10, 136.9],
                [11, 143.8],
                [12, 149.4],
                [13, 151.2],
                [14, 152.3],
                [15, 155.9],
                [16, 154.7],
                [17, 157.0],
                [18, 156.1],
                [19, 155.4]
            ], "90%": [
                [2, 95.6],
                [3, 104.1],
                [4, 111.9],
                [5, 119.6],
                [6, 127.6],
                [7, 133.1],
                [8, 138.7],
                [9, 147.1],
                [10, 152.8],
                [11, 161.3],
                [12, 166.6],
                [13, 167.9],
                [14, 169.3],
                [15, 170.1],
                [16, 172.4],
                [17, 169.2],
                [18, 171.1],
                [19, 172.4]
            ], "25%": [
                [2, 87.2],
                [3, 95.9],
                [4, 101.9],
                [5, 107.4],
                [6, 114.8],
                [7, 121.4],
                [8, 126.8],
                [9, 133.4],
                [10, 138.6],
                [11, 146.2],
                [12, 152.0],
                [13, 153.8],
                [14, 155.7],
                [15, 158.4],
                [16, 157.0],
                [17, 158.5],
                [18, 158.4],
                [19, 158.1]
            ], "10%": [
                [2, 84.0],
                [3, 91.9],
                [4, 99.2],
                [5, 105.2],
                [6, 112.7],
                [7, 118.0],
                [8, 123.3],
                [9, 130.2],
                [10, 135.0],
                [11, 141.1],
                [12, 148.3],
                [13, 150.0],
                [14, 150.7],
                [15, 154.3],
                [16, 153.6],
                [17, 155.6],
                [18, 154.7],
                [19, 153.1]
            ], "mean": [
                [2, 90.2],
                [3, 98.3],
                [4, 105.2],
                [5, 112.2],
                [6, 119.0],
                [7, 125.8],
                [8, 131.3],
                [9, 138.6],
                [10, 144.2],
                [11, 151.3],
                [12, 156.7],
                [13, 158.6],
                [14, 160.5],
                [15, 162.1],
                [16, 162.9],
                [17, 162.2],
                [18, 163.0],
                [19, 163.1]
            ], "75%": [
                [2, 93.2],
                [3, 101.5],
                [4, 107.9],
                [5, 116.6],
                [6, 122.8],
                [7, 129.3],
                [8, 135.2],
                [9, 143.7],
                [10, 148.7],
                [11, 156.9],
                [12, 160.8],
                [13, 163.0],
                [14, 165.0],
                [15, 165.8],
                [16, 168.7],
                [17, 166.2],
                [18, 167.6],
                [19, 168.0]
            ], "85%": [
                [2, 94.5],
                [3, 102.8],
                [4, 110.4],
                [5, 119.0],
                [6, 125.7],
                [7, 131.5],
                [8, 137.9],
                [9, 146.0],
                [10, 151.3],
                [11, 159.9],
                [12, 164.0],
                [13, 166.5],
                [14, 167.5],
                [15, 168.5],
                [16, 171.5],
                [17, 168.0],
                [18, 169.8],
                [19, 170.3]
            ], "50%": [
                [2, 90.2],
                [3, 98.1],
                [4, 105.2],
                [5, 111.7],
                [6, 118.2],
                [7, 125.6],
                [8, 130.5],
                [9, 138.3],
                [10, 143.7],
                [11, 151.4],
                [12, 156.7],
                [13, 157.7],
                [14, 161.0],
                [15, 162.0],
                [16, 162.8],
                [17, 162.2],
                [18, 162.8],
                [19, 163.3]
            ]};

            var dataset = [
                { label: "Female mean", data: females["mean"], lines: { show: true }, color: "rgb(255,50,50)" },
                { id: "f15%", data: females["15%"], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(255,50,50)" },
                { id: "f25%", data: females["25%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f15%" },
                { id: "f50%", data: females["50%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(255,50,50)", fillBetween: "f25%" },
                { id: "f75%", data: females["75%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(255,50,50)", fillBetween: "f50%" },
                { id: "f85%", data: females["85%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f75%" },

                { label: "Male mean", data: males["mean"], lines: { show: true }, color: "rgb(50,50,255)" },
                { id: "m15%", data: males["15%"], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(50,50,255)" },
                { id: "m25%", data: males["25%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: "m15%" },
                { id: "m50%", data: males["50%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(50,50,255)", fillBetween: "m25%" },
                { id: "m75%", data: males["75%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(50,50,255)", fillBetween: "m50%" },
                { id: "m85%", data: males["85%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: "m75%" }
            ];

            $.plot($("#placeholder"), dataset, {
                xaxis: {
                    tickDecimals: 0
                },
                yaxis: {
                    tickFormatter: function (v) {
                        return v + " cm";
                    }
                },
                legend: {
                    position: "se"
                }
            });

            // Add the Flot version string to the footer

            $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
        });

    </script>
</head>
<body>

<div id="header">
    <h2>Percentiles</h2>
</div>

<div id="content">

    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
    </div>

    <p>Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: <a
            href="http://www.cdc.gov/nchs/data/nhsr/nhsr010.pdf">CDC</a>). The 15%-85%, 25%-75% and 50% percentiles are
        indicated.</p>

    <p>For each point of a filled curve, you can specify an arbitrary bottom. As this example illustrates, this can be
        useful for plotting percentiles. If you have the data sets available without appropriate fill bottoms, you can
        use the fillbetween plugin to compute the data point bottoms automatically.</p>

</div>

<div id="footer">
    Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>

</body>
</html>
